import QtQuick 1.1
import com.meego 1.0
import "Modulelib.js" as ModuleUtil
import "CommomUtil.js" as Util
import "const.js" as Const

// 车型库首页
Page {
    id: modulelibs_page

    orientationLock : PageOrientation.LockPortrait

    property int fontSize: 16

    property bool busy: true

    TitleBar{
        id: modulelibs_title
        anchors.top: modulelibs_page.top; anchors.left: modulelibs_page.left
        width: modulelibs_page.width; height: 71
        titleName: "选择品牌"
        z: 10
    }

    Rectangle{
        id: modulelibs_search_rect
        width: parent.width; height: 108
        color: "#859fc4"
        anchors.left: parent.left; anchors.top: modulelibs_title.bottom
        opacity: 1; z: 10
    }

    Rectangle{
        id: modulelibs_list_title_rect
        width: parent.width; height: 54
        anchors.left: parent.left; anchors.top: modulelibs_search_rect.bottom
        opacity: 1; z: 10
//        color:
    }

    TextField{
        id: modulelibs_search
        anchors.left: modulelibs_search_rect.left; anchors.top: modulelibs_search_rect.top
        anchors.leftMargin: 85; anchors.topMargin: 35
        z: 11
        width: 350
    }

    Image{
        id: search_image
        width: 48; height: 48
        anchors.right: modulelibs_search.left
        anchors.top: modulelibs_search.top
        source: "../images/modelslib/ico.png"
        z: 12
        MouseArea{
            id: itemMouseArea
            anchors.fill: parent
            onClicked: {
                if(modulelibs_search.text.length > 0){
                    createSearchModel(modulelibs_search.text);
                    module_list.model = search_model;
                }else{
                     module_list.model = modulelib_data;
                }
            }
        }

        states: [
            State {
                name: 'pressed'; when: itemMouseArea.pressed
                PropertyChanges { target: mouseAreaPressed; focus: true; opacity: 0.5}
            }
        ]
    }

    Rectangle{
        id: mouseAreaPressed
        anchors.fill: search_image
        color: "#000"
        opacity: 0
    }

    Text{
        id: list_title
        anchors.fill: modulelibs_list_title_rect
        anchors.leftMargin: 42
        text: "请选择品牌"
        color: "#7a7575"
        font.bold: true; font.pointSize: 18
        horizontalAlignment : Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        z: 15
    }

    ModulelibListModel{
          id: modulelib_data
    }

    Component {
        id: modulelibDelegate
        ModulelibLetterItem {
//            letter: Letter
            itemFLetter: FirstLetter
            itemId: id
            itemImg: img
            itemType: Type
            itemName: name
            letter_fontSize: 21
        }
    }

    Component {
        id: letter_header
        Item {
            width: modulelibs_page.width; height: 38
            BorderImage {
                id: titlebar_back
                source: "../images/modelslib/line.png"
                width: modulelibs_page.width; height: parent.height
            }

            Text {
                id: title
                color: "#f7f0f0"
                font.bold: true; font.pointSize: 21
                text: section
                anchors.fill: titlebar_back; anchors.leftMargin: 20
                verticalAlignment: Text.AlignVCenter
            }

        }
    }

    ListModel{
        id: empty_list
    }


    Rectangle{
        id: modulelibs_list_rect
        anchors.left: parent.left; anchors.top: modulelibs_list_title_rect.bottom
        color: Const.Color.PageBack
        width: parent.width; height: 547
        ListView{
            id: module_list
            anchors.fill: modulelibs_list_rect
            model: modulelibs_page.busy ? empty_list : modulelib_data
            delegate: modulelibDelegate

            section.property: "FirstLetter"
            section.criteria: ViewSection.FullString
            section.delegate: letter_header
        }
    }

    ListModel{
        id: search_model
    }

    Component.onCompleted: {
        modulelib_data.getData();
    }

    function createSearchModel(textValue){
        search_model.clear();
        if(ModuleUtil.isLetter(textValue)){
            var letter = "A"
            for(var i = 0; i < modulelib_data.count; i++){
                letter = modulelib_data.get(i).Letter;
                if(letter === textValue){
                    search_model.append(modulelib_data.get(i))
                }
            }
        }else{
            var name = ""
            for(var j = 0; j < modulelib_data.count; j++){
                name = modulelib_data.get(j).name;
                if(name.indexOf(textValue) >= 0){
                    search_model.append(modulelib_data.get(j))
                }
            }
        }
    }
}
